<!DOCTYPE html>
<html lang="zh-CH">
<head>
	<meta charset="UTF-8">
	<title>抓娃娃h5</title>
	<meta http-equiv="X-UA-compatibal" content="IE=Edge">
	<meta name="viewport" content="with=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles/bootstrap.min.css">
	<link rel="stylesheet" href="styles/common.css" />
	<link rel="stylesheet" href="styles/index.css" />
	<script src="js/jquery.js"></script>
	<script src="js/base.js"></script>
</head>
<body>
	<div class="title"><img src="src/back.png">
	迎国庆 抓好礼</div>
	<div class="top_bg">
		<div class="oval"></div>
		<div class="all_bg">
			<!-- 倒计时进度条开始 -->
			<div class="d_number"><span>30</span>S</div>
			<div class="progress">
				<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 100%;">
				</div>
			</div>
			<!-- 倒计时进度条结束 -->

			<div class="cover"></div>
			<div class="logo"><img src="src/logo.png"></div>
			<div class="time">
				<img src="src/dao.png">
				剩余次数：<span>2</span>
			</div>

			<!-- 弹窗开始 -->
			<div class="result"></div>

			<!-- 分享 -->
			<div class="word">
				<img src="src/share.png" class="share">
				<img src="src/word.png" class="word_img">
			</div>

			<!-- 邀请记录 -->
			<div class="no_invite">
				<img src="src/r_close.png" class="r_close_no">
				<img src="src/no_invite.png" class="no_invite_img">
				<div class="no_invite_word">还没有邀请记录</div>
				<div class="one_more" style="margin-top: 20px;">邀请好友</div>
			</div>

			<!-- 奖品 -->
			<div class="gift">
				<img src="src/r_close.png" class="r_close_no">
				<img src="src/gift.png" class="gift_img">
				<div class="g_number g_one">
					收到<span>10</span>个红包  
				</div>
				<div class="g_number g_two">   
					总计<span>10</span>元
				</div>
				<div class="gift_bg">
					<span>中奖礼品</span>
					<span>中间时间</span>
				</div>
				<div class="table_body">
					<table>
						<tr>
							<td>5元代金券</td>
							<td>2017-09-10</td>
						</tr>
						<tr>
							<td>5元代金券</td>
							<td>2017-09-10</td>
						</tr>
						<tr>
							<td>5元代金券</td>
							<td>2017-09-10</td>
						</tr>
						<tr>
							<td>5元代金券</td>
							<td>2017-09-10</td>
						</tr>
						<tr>
							<td>5元代金券</td>
							<td>2017-09-10</td>
						</tr>
					</table>
				</div>
				<div class="gift_word">
					<div>红包发放温馨提示</div>
				红包发放将在用户中奖后的10个工作日 内放，特殊情况红包发放可能有所延迟。 详细记录可在翼支付APP查询。 </div>
			</div>
			
			<!-- 规则 -->
			<div class="rule">
				<img src="src/close.png">
				<div class="rule_title">活动规则</div>
				<div class="rule_body">
					<p>1.获取没有办法，系统处理字体一般只能达到这个效果，如果不是广泛的应用可以使用图片游戏机会获取游戏机会获</p>
					<p>2.取没有办法，系统处理字体一般只能达到这个效果，如果不是广泛的应用可以使用图片游戏机会获取游戏机会获取游戏机会获取游戏机会获取游戏机</p>
					<p>3.会获取游没有办法，系统处理字体一般只能达到这个效果，如果不是广泛的应用可以使用图片戏机会获取游戏机会获取游戏机会获取游戏机会获取游戏机会获取游戏机会获取游戏机会获取游戏机</p>
					<p>4.会获取游戏机会获取游戏机会获取游戏机会</p>
					<p>5.取没有办法，系统处理字体一般只能达到这个效果，如果不是广泛的应用可以使用图片游戏机会获取游戏机会获取游戏机会获取游戏机会获取游戏机</p>
				</div>
			</div>

			<!-- 中奖 -->
			<div class="zhong">
				<img src="src/r_close.png" class="r_close">
				<div class="z_title">哇塞！居然中奖了！</div>
				<img src="src/z.png" class="z_img">
				<div class="z_word"><span>1</span>元</div>
				<div class="z_type">代金券</div>
			</div>

			<!-- 机会用完 -->
			<div class="no_chance">
				<img src="src/r_close.png" class="r_close">
				<img src="src/no_chance.png" class="no_img">
				<div class="no_word">点击右上角分享给好友，邀请未参加 的好友获得更多的游戏机会！</div>
			</div>

			<!-- 未中奖 -->
			<div class="nothing">
				<img src="src/r_close.png" class="r_close">
				<img src="src/nothing.png" class="nothing_img">
				<div class="nothing_word">什么</br>都没有</div>
				<div class="one_more">再来一次</div>
			</div>

			<!-- 时间到 -->
			<div class="time_over">
				<img src="src/r_close.png" class="r_close">
				<img src="src/timeover.png" class="time_over_img">
			</div>

			<!-- 弹窗结束 -->
			
			<!-- 游戏层canvas开始 -->
			<div class="allcanvas">
				<div class="bg"></div>
				<canvas id="canvas1" width="280" height="470" ></canvas>
				<canvas id="canvas2" width="280" height="470" ></canvas>
			</div>
			<!-- 游戏层canvas结束 -->
			
			<!-- 按钮 -->
			<div class="c_btn one">我的奖品</div>
			<div class="c_btn two">获取游戏机会</div>
			<!-- 按钮 -->
		</div>
	</div>
	<div class="r_all">
		<div class="r_body">
			<div class="r_title">活动排行榜
				<img src="src/r_title_.png">
			</div>
		    <div class="topRec_List">
		  		<dl>
		        	<dd>时间</dd>
		        	<dd>名字</dd>
		        	<dd>奖品</dd>
		        </dl>
		        <div class="maquee">
		            <ul>
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		                <li>
		                    <div>10-05  9:22:30</div>
		                    <div>小飞象</div>
		                    <div>5元通用代金券</div>
		                </li> 
		            </ul>
		        </div>
		    </div>
		</div>
	</div>

	<div class="rule_all">
		<div class="rule_t">游戏规则</div>
		<div class="rule_con"> 
			<div>
				<span>1</span>本次活动时间2017年10月1日-10月10日；
			</div>
			<div>
				<span>2</span>本次活动限已绑定手机号的新疆翼支付三星级用户参与；
			</div>
			<div>
				<span>3</span>每个用户每日默认两次游戏机会，每次限30秒，分享活动并成功邀请一位未参与过的朋友参与游戏，即可获得额外多获得1次玩游戏的机会（要进入游戏必须关注公众）同一用户每天累计最多有20次机会；
			</div>
			<div>
				<span>4</span>每天获得中奖用户将会次日页面公布；
			</div>
			<div>
				<span>5</span>代金券使用规则请登录“翼支付-我的-代金券“查看，代金券到账后5天内有效；
			</div>
			<div>
				<span>6</span>用户通过非正常方式参与活动，如刷红包等，一经发现将取消中奖资格。
			</div>
		</div>
	</div>


	<script src="js/commonFunctions.js"></script>
	<script src="js/main.js"></script>
	<script src="js/background.js"></script>
	<script src="js/fruit.js"></script>
	<script src="js/mom.js"></script>
	<script src="js/collision.js"></script>  <!-- 碰撞检测 -->
	<script type="text/javascript">
		$(".r_close_no").click(function(){
			$(".result").hide();
			$(".no_invite").hide();
			$(".gift").hide();
		})
		$(".allcanvas").click(function(){
			$(".cover").show();
			stop();
		})
	    var times = 30 * 100; // 60秒
	    countTime = setInterval(function() {
	        times = --times < 0 ? 0 : times;
	        var ms = Math.floor(times / 100).toString();

	        if(ms.length <= 1) {
	            ms = "0" + ms;
	        }
	        var hm = Math.floor(times % 100).toString();
	        if(hm.length <= 1) {
	            hm = "0" + hm;
	        }
	        if(times == 0) {
	            // console.log("游戏结束");
	            $(".cover").show();
				$(".result").show();
				$(".time_over").show();
	            clearInterval(countTime);
	        }
	        $(".d_number span").html(ms);
	        var w = (ms/30* 100) + "%";
	        $(".active").css("width", w);
	    }, 10); 
	</script>
</body>
</html>